<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="titleInfo">
        <el-input v-model="form.titleInfo" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="form.sort" placeholder="请输入排序"/>
      </el-form-item>
      <el-form-item label="拓展字段" prop="expandStr">
        <el-input v-model="form.expandStr" placeholder="拓展字段"/>
      </el-form-item>
      <el-form-item label="轮播类型" prop="carouselType">
        <el-select style="width: 100%;" v-model="form.carouselType" placeholder="请选择轮播类型" clearable>
          <el-option
            v-for="dict in carouselType"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="轮播图片" prop="imaheUrl">
        <el-upload
          class="image-uploader"
          list-type="picture-card"
          :action="uploadImgUrl"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleImageSuccess"
          :before-upload="beforeImageUpload">
          <img v-if="form.imaheUrl" :src="form.imaheUrl" alt="" class="image">
          <i v-else class="el-icon-plus image-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="老跳转地址" prop="oldHref">
        <el-input v-model="form.oldHref" placeholder="请输入老跳转地址"></el-input>
      </el-form-item>
      <el-form-item label="新跳转地址" prop="newHref">
        <el-input v-model="form.newHref" placeholder="请输入新跳转地址"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getToken} from "@/utils/auth";
import {add, updateById} from "@/api/system/carousel";

export default {
  name: "carousel-create",
  props: {
    carouselType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 表单参数
      form: {
        titleInfo: '',
        sort: null,
        expandStr: '',
        carouselType: null,
        imaheUrl: '',
        oldHref: '',
        newHref: ''
      },
      // 表单校验
      rules: {
        titleInfo: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
        sort: [
          {required: true, message: "排序不能为空", trigger: "blur"}
        ],
        carouselType: [
          {required: true, message: "轮播类型不能为空", trigger: "change"}
        ],
        imaheUrl: [
          {required: true, message: "轮播图片不能为空", trigger: "blur"}
        ],
        oldHref: [
          {required: true, message: "老跳转地址不能为空", trigger: "blur"}
        ],
        newHref: [
          {required: true, message: "新跳转地址不能为空", trigger: "blur"}
        ],
      },
      // 图片上传地址
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/upload/uploadFile",
      headers: {
        token: getToken(),
      },
    }
  },
  methods: {
    open(data) {
      if (data) {
        this.title = "修改轮播"
        this.form = {
          id: data.id,
          titleInfo: data.titleInfo,
          sort: data.sort,
          carouselType: String(data.carouselType),
          imaheUrl: data.imaheUrl,
          oldHref: data.oldHref,
          newHref: data.newHref
        }
      } else {
        this.reset()
        this.title = "新增轮播"
      }
      this.visible = true;
    },
    // 图片上传限制
    beforeImageUpload(file) {
      const isImage = file.type.includes('image/');
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isImage) {
        this.$message.error('上传头像图片只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isImage && isLt2M;
    },
    // 上传成功
    handleImageSuccess(res) {
      if (res.code === 200) {
        this.form.imaheUrl = res.data.previewUrl
      } else {
        this.$message.warning(res.msg)
      }
    },
    // 保存表单
    submitForm() {
      if (this.form.id) {
        this.loading = false
        updateById(this.form).then(res => {
          if (res.code === 0) {
            this.$message.success('修改成功')
            this.cancel()
            this.$emit('submit')
          }
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.loading = false
        add(this.form).then(res => {
          if (res.code === 0) {
            this.$message.success('新增成功')
            this.cancel()
            this.$emit('submit')
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        titleInfo: '',
        sort: null,
        carouselType: null,
        imaheUrl: '',
        oldHref: '',
        newHref: ''
      };
      this.resetForm("form");
    },
  }
}
</script>

<style lang="scss" scoped>
.image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.image-uploader .el-upload:hover {
  border-color: #409EFF;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.image {
  width: 146px;
  height: 146px;
  display: block;
}
</style>
